<script setup>
import {computed, defineProps} from 'vue'
import { addWidthToImages } from "@/utils/index.js"
const props = defineProps({
  ticketsDetailsVoList: Array,
  price: [Number, String],
  refundType: [Number, String],
  isShowBook: Boolean,
  type: String,
  title: String,
  productDetail: String,
  isShowReceive: Boolean
})

const emit = defineEmits(['bookingPolicyClose', 'bookingPolicyBookIng', 'handleReceive'])

const closeClick = () => {
  emit('bookingPolicyClose')
}

const bookClick = () => {
  emit('bookingPolicyBookIng')
}

const titleName = computed(() => {
  return props.title || '使用须知'
})

const list = computed(() => {
  const temp = props.ticketsDetailsVoList.find(item => titleName.value === item.goodTittle)
  if (temp) {
    let arr = props.ticketsDetailsVoList.filter(item => titleName.value !== item.goodTittle)
    return [temp, ...arr]
  }
  return props.ticketsDetailsVoList
})
const receiveClick = () => {
  emit('handleReceive')
}
</script>

<template>
  <div class="intro">
    <div class="popup_header">
      <div class="title">{{ titleName }}</div>
      <img class="image_close" @click="closeClick" src="@/assets/images/icons/close-666666.png" alt="">
    </div>
    <div class="content" :class="{content_no_show_pay_button: !(isShowBook || isShowReceive)}">
      <div class="no_cancel" v-if="refundType === 0 || refundType === '0'">
        <van-icon name="warning-o" />
        <span>注意：本商品购买后不可取消</span>
      </div>
      <template v-if="list.length">
        <div class="content_text_box" v-for="(item, index) in list" :key="index">
          <div class="intro_header" v-if="!(!index && item.goodTittle === titleName)">
            <div class="title">{{ item.goodTittle }}</div>
          </div>
          <div class="notice" v-for="item in item.introduce" :key="item.index">
            <div class="notice_title" :class="{notice_title_first: !index}">
              <div class="title">{{ item.goodTittle }}</div>
            </div>
            <div class="notice_text">{{ item.goodIntroduce }}</div>
          </div>
        </div>
      </template>
      <div class="content_text_box" v-if="productDetail">
        <div class="intro_header">
          <div class="title">商品详情</div>
        </div>
        <div class="v_html" v-html="addWidthToImages(productDetail)" />
      </div>
    </div>
    <div class="bottom" v-if="isShowBook">
      <div class="book">
        <div class="intro_book_button" @click="bookClick">
          {{type === 'hotel' ? '立即囤券' : '预订'}}
        </div>
        <div class="intro_price">
          <span class="text">应付金额：</span>
          <div class="price_box">
            <span class="icon">
              ￥
            </span>
            <span class="number">
              {{ price }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" v-if="isShowReceive">
      <div class="book">
        <div class="intro_receive_button" @click="receiveClick">
          领取
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.intro {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  .popup_header{
    display: flex;
    padding: 2rem 2rem 0 2rem;
    justify-content: space-between;
    align-items: center;
    height: 2.8rem;
    .title{
      font-size: 2rem;
      font-weight: bold;
    }
    .image_close {
      width: 1.4rem;
      height: 1.4rem;
    }
  }
  .content {
    max-height: calc(70vh - 2rem - 2.8rem - 3rem - 9rem);
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    .no_cancel{
      display: flex;
      align-items: center;
      font-size: 1.4rem;
      color: #ED6316;
      margin-bottom: 1.5rem;
      span{
        margin-left: .3rem;
      }
    }
    .content_text_box {
      flex: 1;
      .intro_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 2.8rem;
        margin-bottom: 1rem;

        .title {
          font-size: 1.6rem;
          font-weight: bold;
        }
      }
      .notice {
        width: 100%;
        display: flex;
        margin-bottom: 2rem;
        .notice_title{
          min-width: 6.7rem;
          line-height: 2.2rem;
          border-radius: .3rem;
          font-size: 1.4rem;
          margin-right: 1.4rem;
          .title{
            padding: 0 .5rem;
            color: #666666;
            background: rgba(0,0,0,0.05);
          }
        }
        .notice_title_first{
          .title{
            background: rgba(79,172,145,0.1);
            color: var(--van-primary-color);
          }
        }
        .notice_text{
          font-size: 1.4rem;
          color: #666666;
          line-height: 2.2rem;
        }
      }
      .v_html{
        font-size: 1.6rem;
        line-height: 1.5;
        word-break: break-word;
      }
    }
  }
  .content_no_show_pay_button{
    max-height: calc(70vh - 2rem - 2.8rem - 3rem)
  }
  .bottom {
    width: 100%;
    height: 9rem;
    background: #FFFFFF;
    flex-shrink: 0;
    .book {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      margin-right: 2rem;
      margin-top: 1rem;
      .intro_book_button {
        height: 3.8rem;
        background: var(--van-primary-color);
        border-radius: .5rem;
        padding: 0 3rem;
        font-size: 1.6rem;
        color: #FFFFFF;
        line-height: 3.8rem;
      }
      .intro_book_button:active {
        background-color: var(--van-primary-button-active-color);
      }

      .intro_receive_button{
        height: 3.8rem;
        background: linear-gradient(315deg, #ED6316 0%, #FFCA0D 100%);
        border-radius: .5rem;
        padding: 0 3rem;
        font-size: 1.6rem;
        color: #FFFFFF;
        line-height: 3.8rem;
      }
      .intro_receive_button:active{
        opacity: 0.8;
      }


      .intro_price {
        display: flex;
        align-items: center;
        margin-right: 1rem;

        .text {
          font-size: 1.4rem;
          color: #999999;
        }

        .price_box {
          display: flex;
          align-items: baseline;
          font-weight: bold;

          .icon {
            font-size: 1.4rem;
            color: #ED6316;
          }

          .number {
            font-size: 2.2rem;
            color: #ED6316;
          }
        }
      }
    }
  }
}
</style>